<template>
  <div style="display: flex;">
    <Dict @getDictType="getDictType" />
    <el-card style="margin: 15px;width: 100%">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="字典标签" prop="label">
          <el-input
            v-model="queryParams.label"
            placeholder="请输入字典标签"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <!-- <el-form-item label="字典键值" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入字典键值"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
      <Test ref="testRef" />

      <div class="mb-[10px]">
        <el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
          删除
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="字典名称" prop="typeName" />
        <el-table-column label="字典ID" prop="id" />
        <el-table-column label="字典类型" prop="typeCode" />
        <el-table-column label="字典标签" prop="label">
          <template #default="scope">
            <div class="iTag" :style="{ background: scope.row.color+'30', color: scope.row.color}">{{ scope.row.label }}</div>
          </template>
        </el-table-column>
        <el-table-column label="字典键值" prop="value">
          <template #default="scope">
            {{ JSON.stringify(scope.row.value) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status == 'open'">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="handleEditClick(scope.row)">编辑</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="paging.page"
          v-model:page-size="paging.size"
          :page-sizes="[10, 20, 30, 50, 100]"
          :size="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <DataForm ref="dataFormRef" @refresh="() => getDictType({ id: typeId, code: queryParams.typeCodes })" />
  </div>
</template>

<script setup>
import Test from './test.vue'
import DictAPI from '@/api/system/dict.api.ts'
import DataForm from './dataForm.vue'
import Dict from './dict.vue'
import useToggle from "@/hooks/useToggle";

const [loading, ,changeLoading] = useToggle(false)

const paging = ref({
  size: 10,
  page: 1,
  total: 0,
})

const handleSizeChange = (e) => {
  paging.value.size = e
  getDictType({id: typeId.value, code: queryParams.value.typeCodes})
}
const handleCurrentChange = (e) => {
  paging.value.page = e
  getDictType({id: typeId.value, code: queryParams.value.typeCodes})
}

const ids = ref([])
const tableData = ref([])
const queryParams = ref({
  typeCodes: void undefined,
  label: void undefined,
})
const handleQuery = () => {
  paging.value.page = 1
  getDictType({id: typeId.value, code: queryParams.value.typeCodes})
}

const queryFormRef = ref(null)
const handleResetQuery = () => {
  queryFormRef.value.resetFields()
  paging.value.page = 1
  paging.value.size = 10
  getDictType({id: typeId.value, code: queryParams.value.typeCodes})
}
const handleSelectionChange = (e) => {
  ids.value = e.map((item) => item.id)
}

const dataFormRef = ref(null)
const handleAddClick = () => {
  dataFormRef.value.handleOpen(typeId.value)
}

const handleEditClick = (row) => {
  dataFormRef.value.handleOpen(typeId.value, row)
}

const handleDelete = (id) => {

  if(!id){
    ElMessageBox.confirm(
      '是否确定删除选中项?',
      '温馨提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    .then(() => {
      DictAPI.deleteData({
        dataIds: ids.value,
      }).then(res => {
        handleQuery()
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      
    })

    return
  }

  ElMessageBox.confirm(
      '是否确定删除此项?',
      '温馨提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    .then(() => {
      DictAPI.deleteData({
        dataIds: [id]
      }).then(res => {
        handleQuery()
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      
    })
}

const testRef = ref(null)
const typeId = ref(null)
const getDictType = ({id, code}) => {
  testRef.value ? testRef.value.init(code) : ''
  changeLoading(true)
  queryParams.value.typeCodes = code
  typeId.value = id
  DictAPI.getDataList({
    ...queryParams.value,
    page: paging.value.page,
    size: paging.value.size
  }).then(res => {
    console.log(res)
    paging.value.total = res.count
    tableData.value = res.rows
  }).finally(() => {
    changeLoading(false)
  })
}
</script>

<style scoped>
.pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
.iTag{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
}
</style>

